import { Button, Form, Input, Select, Table, } from 'antd';
import { SettingOutlined } from '@ant-design/icons'
import React, { useEffect, useState,useRef } from 'react';
import Styles from "./../../assets/styles/shoptype.module.less"
import AddshopType from "../../components/AddshopType.jsx"
<<<<<<< HEAD
import { getShopType, addShopType ,delShopType} from '../../apis/shop'
import qs from "querystring"

=======
import DelshopType from '../../components/ChaneShopType';
import { getShopType } from '../../apis/shop'
import qs from "querystring"
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40

const { Option } = Select;

const ShopType = () => {
  const [form] = Form.useForm();
  const [, forceUpdate] = useState({});
  const [checkStrictly, setCheckStrictly] = useState(false);
  const [data, setData] = useState([])


  useEffect(() => {
    forceUpdate({});
    fetchData()
  }, [])

  const fetchData = async () => {
    const res = await getShopType()
    setData(res.data.rows.children)
  }

  //表格
  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      render: (inf) => <a><DelshopType treedata={data} inf={inf}></DelshopType></a>,
    },
  ]

<<<<<<< HEAD
  const onFinish = (values) => {
    // console.log(values);
=======
  const onFinish = async (values) => {
    // console.log(values);
    const res = await getShopType()
    const data = res.data.rows.children
    
    const newdata = data.filter(s => {
      if (values.name) {
        // eslint-disable-next-line eqeqeq
        if (s.title.indexOf(values.name) != -1) {
         return s
        }
      } else{
        if(values.status){
          // console.log(s);
          if (s.status==values.status) {
            return s
          }
        }else{
          return true
        }
         
      }
    })
    // console.log(newdata);
    setData(newdata)


>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
  };
  const [id, setID] = useState('')
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      // console.log(selectedRows);
      setID(selectedRowKeys.join())
    },
    onSelect: (record, selected, selectedRows) => {
      // console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      // console.log(selected, selectedRows, changeRows);
    },
  };
<<<<<<< HEAD
  const getTree = async (p) => {
    const shops = {
      name: p.shoptype,
      pid: p.password,
      status:7
    }
    const newShop = qs.stringify(shops)
    const res = await addShopType(newShop)
    // console.log(res)
    fetchData()
  }
  //删除
  const delMsg = async () => {
    const res = await delShopType(id)
    // console.log(res)
    fetchData()
  }
  //重置
  const clearForm = useRef()
  const resetting = () => {
    clearForm.current.resetFields()
  }
=======

  const updata = (a) => {
    if (a == 1) {
      fetchData()
    }
  }


>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
  return (
    <>
      <div className={Styles.headerOne}>
        <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish} ref={clearForm}>
          <Form.Item
            name="name"
            label="商品类型名称:"
          >
            <Input placeholder="" />
          </Form.Item>
          <Form.Item
            name="status"
            label="状态"
            style={{ width: "120px" }}
          >
            <Select
              placeholder=""
              allowClear
            >
              <Option value="启用">启用</Option>
              <Option value="停用">停用</Option>
            </Select>

          </Form.Item>
          <div className={Styles.findOne}>
            <Form.Item shouldUpdate>
              {() => (
                <Button type="primary" htmlType="submit" className={Styles.find}>
                  查询
                </Button>
              )}
            </Form.Item>
            <Button className={Styles.findTwo}  onClick={resetting}>重置</Button>
          </div>

        </Form>
      </div>
      {/* 新增抽屉 */}
      <div style={{ display: "flex", flexDirection: "row" }}>
<<<<<<< HEAD
        <div><AddshopType treedata={data} getTree={getTree}></AddshopType></div>
        <div style={{ marginLeft: "20px" }}  onClick={delMsg}><Button>删除</Button></div>
=======
        <div><AddshopType treedata={data} updata={updata}></AddshopType></div>
        <div style={{ marginLeft: "20px" }}><Button>删除</Button></div>
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
      </div>


      <div style={{ marginTop: "20px" }}>
        <Table
          columns={columns}
          rowSelection={{
            ...rowSelection,
            checkStrictly,
          }}
          dataSource={data}
          bordered
          rowKey="id"
          pagination={{
<<<<<<< HEAD
            pageSize: 10,
=======

            pageSize: 5,
>>>>>>> 4baf4dd9148ff997549c6b069115f97a7a198f40
            pageSizeOptions: [5, 10, 15],
            showSizeChanger: true,
            showQuickJumper: true,

          }}
          size="large"
        />
      </div>
    </>
  );
};
export default ShopType;
